<template>
  <div class="com-container" @dblclick="dblResMap">
    <div class="com-chart" ref="map_ref"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import axios from "axios";
import { getProvinceMapInfo } from "@/utils/map_utils.js";
export default {
  data() {
    return {
      allData: null,
      echartInstance: null, //服务器获取过来的数据
      fontSize: 0,
      mapData: {} //缓存proviceInfo.key，避免反复发起Ajax请求
    };
  },
  created() {
    this.$socket.registerCallBack("mapData", this.getData);
  },
  mounted() {
    this.initChart();
    // this.getData();
    this.$socket.send({
      action: "getData",
      socketType: "mapData",
      chartName: "map",
      value: ""
    });
    window.addEventListener("resize", this.screenAdapter);
    // 在刚进入页面时，主动进行屏幕适配
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
    this.$socket.unRegisterCallBack("mapData");
  },
  methods: {
    async initChart() {
      this.echartInstance = this.$echarts.init(this.$refs.map_ref, this.theme);
      const ret = await axios.get(
        "http://localhost:8080/static/map/china.json"
      );
      console.log(ret);
      this.$echarts.registerMap("china", ret.data);
      const initOption = {
        title: {
          text: "▎商家分布",
          top: 20,
          left: 20
        },

        geo: {
          type: "map",
          map: "china",
          // top: "5%",
          // bottom: "5%",
          itemStyle: {
            areaColor: "#2e72bf", //地图区域的颜色。
            borderColor: "#ccc" //图形的描边颜色
          }
        },
        legend: {
          left: "5%",
          bottom: "5%",
          orient: "vertical" //图例列表的布局朝向
        }
      };
      this.echartInstance.setOption(initOption);
      this.echartInstance.on("click", async arg => {
        const proviceInfo = getProvinceMapInfo(arg.name);
        console.log(proviceInfo);
        // 判断是否缓存了点击的省份的key,如果不存在，再发起Ajax请求
        if (!this.mapData[proviceInfo.key]) {
          const ret = await axios.get(
            "http://localhost:8080" + proviceInfo.path
          );
          // 缓存点击省份的key
          this.mapData[proviceInfo.key] = ret.data;
          this.$echarts.registerMap(proviceInfo.key, ret.data);
        }
        // 设置点击省份的key
        const changeOption = {
          geo: {
            map: proviceInfo.key
          }
        };
        // 渲染点击省份的地图
        this.echartInstance.setOption(changeOption);
      });
    },
    getData(ret) {
      // const { data: ret } = await this.$http.get("map");
      console.log(ret);
      this.allData = ret;
      this.updateChart();
    },
    updateChart() {
      // 图例数据
      const legendArr = this.allData.map(item => {
        return item.name;
      });
      const seriesArr = this.allData.map(item => {
        return {
          name: item.name,
          // 在地图中显示散点，要添加 coordinateSystem: "geo"
          coordinateSystem: "geo",
          type: "effectScatter", //散点图
          data: item.children,

          rippleEffect: {
            brushType: "stroke", //波纹的绘制方式
            scale: 5 //动画中波纹的最大缩放比例
          }
        };
      });
      const dataOption = {
        legend: {
          data: legendArr
        },
        series: seriesArr
      };
      this.echartInstance.setOption(dataOption);
    },
    // 屏幕适配
    screenAdapter() {
      this.fontSize = (this.$refs.map_ref.offsetWidth / 100) * 3.6;
      // 分辨率相关配置相关
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: this.fontSize
          }
        },
        legend: {
          itemWidth: this.fontSize / 2, //图例标记的图形宽度
          itemHeight: this.fontSize / 2, //图例标记的图形高度
          itemGap: this.fontSize / 2, //图例每项之间的间隔

          borderColor: "#432fsk", //边框颜色
          borderWidth: 1, //边框宽度
          borderType: "solid" //边框样式
        }
      };
      this.echartInstance.setOption(adapterOption);
      this.echartInstance.resize();
    },
    // 双击空白区域回到中国地图
    dblResMap() {
      const resMapOption = {
        geo: {
          map: "china"
        }
      };
      this.echartInstance.setOption(resMapOption);
    }
  },
  computed: {
    ...mapState(["theme"])
  },
  watch: {
    theme() {
      // 销毁当前图表
      this.echartInstance.dispose();
      // 重新创建图表
      this.initChart();
      // 完成屏幕适配
      this.screenAdapter();
      // 更新图表的展示
      this.updateChart();
    }
  }
};
</script>
<style scoped lang=''>
</style>